<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书籍</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4588818_ckhq99mzshn.css">
    <link rel="stylesheet" href="../css/zhuye.css">
    <link rel="stylesheet" href="../css/styles.css">
</head>

<body>
    <div class="dhl1">
        <div class="head">
            <!-- 头像 -->
            <div class="head-logo">
                <img src="./img/a.webp" alt="">
            </div>
            <!-- 名字 -->
            <div class="head-name">
                <a href="#">
                    <h3>第十组</h3>
                </a>
            </div>
            <!-- 搜索框 -->
            <div class="head-search">
                <div class="shell">
                    <input type="text"id="searchInput" placeholder="Search" >
                    <a href="#">
                        <img src="./img/fangdajing.png">
                    </a>
                </div>
            </div>
            <!-- 其他 -->
            <div class="head-other">
                <ul>
                    <li><a href="../../首页/HTML/╓≈╥│.html">首页</a></li>
                    <li><a href="../../kc/kc.html">课程</a></li>
                    <li><a href="../../论坛/新闻.html">论坛</a></li>
                    <li><a href="../../书籍/shuji.html">书籍</a></li>
                    <li><a href="../../我的主页/我的主页.html">我的</a></li>
                </ul>
            </div>
        </div>
        </div>
        <div class="dhl2">
        <div class="small">
            <img src="./img/small.png" width="45px" class="xlcdan">
            <div class="dhl2grxx">
                <img src="./img/a.webp">
                <p>第十组</p>
                </div>
              <div class="dhl2search">
                <input type="text" placeholder="Search" class="inputBox">
                <img src="./img/fangdajing.png" >
              </div>
        </div>
        <div class="dropDownMenu">
            <div class="xlcd2head">
                <ul>
                    <li><a href="../../首页/HTML/╓≈╥│.html">首页</a></li>
                    <li><a href="../../kc/kc.html">课程</a></li>
                    <li><a href="../../论坛/新闻.html">论坛</a></li>
                    <li><a href="../../书籍/shuji.html">书籍</a></li>
                    <li><a href="../../我的主页/我的主页.html">我的</a></li>
                </ul>
            </div>
        </div>
        </div>
    <div class="shujizongti">
        <div id="nav1">
            <p id="variety">书籍分类</p>
            <ul class="fenlei">
                <li class="slide-one"></li>
                <li class="slide-two"></li>
                <li class="leixing"><a href="../shuji.html" class="biaoqian">
                        <p class="type">HTML</p>
                    </a></li>
                <li class="leixing"><a href="./CSS.html" class="biaoqian">
                        <p class="type">CSS</p>
                    </a></li>
                <li class="leixing"><a href="./JavaScript.html" class="biaoqian">
                        <p class="type">JAVASCRIPT</p>
                    </a></li>
                <li class="leixing"><a href="./VUE.html" class="biaoqian">
                        <p class="type">VUE</p>
                    </a></li>
                <li class="leixing"><a href="./PYTHON.html" class="biaoqian">
                        <p class="type">PYTHON</p>
                    </a></li>
                <li class="leixing"><a href="./Java.html" class="biaoqian">
                        <p class="type">JAVA</p>
                    </a></li>
                <li class="leixing"><a href="./C.html" class="biaoqian">
                        <p class="type">C</p>
                    </a></li>
                <li class="leixing"><a href="./C++.html" class="biaoqian">
                        <p class="type">C++</p>
                    </a></li>
                <li class="leixing"><a href="./C11--.html" class="biaoqian">
                        <p class="type">C#</p>
                    </a></li>
                <li class="leixing"><a href="./GO.html" class="biaoqian">
                        <p class="type">GO</p>
                    </a></li>
                <li class="leixing"><a href="./SQL.html" class="biaoqian">
                        <p class="type">SQL</p>
                    </a></li>
                <li class="leixing"><a href="./LINUX.html" class="biaoqian">
                        <p class="type">LINUX</p>
                    </a></li>
                <li class="leixing"><a href="./JQUERY.html" class="biaoqian">
                        <p class="type">JQUERY</p>
                    </a></li>
            </ul>
        </div>
        <div class="books">
            <div class="bookcontainer">
                <a href="https://fanqienovel.com/page/7109738366907714567?enter_from=search" class="bookname"
                    target="_blank"><img src="../images/全栈开发.jpg" alt="" class="cover" style="margin-top: 10px;"></a>
                <div class="zhengwen">
                    <h3>全栈开发实战宝典 </h3>
                    <span class="highlight-text">作者：优逸客科技有限公司 编著</span><span class="span one">已完结 · 计算机</span><span
                        class="span two">16.3万字
                        · 未满1000人在读</span>
                    <span class="span three">收藏数：99 点击数：1000+</span>
                    <p class="p four">“全栈”翻译自英文Full
                        Stack，表示为了完成一个项目所需要的一系列技术的集合。IT行业发展到现阶段，开发一个Web应用，工程师需要具备的技能涵盖：前端标记语言（如HTML 5、CSS
                        3）、前端编程语言（如JavaScript）、服务器端编程语言（如Node.js）、数据库（如MongoDB）等，这些技术互相联系、互相依赖，缺一不可。
                        《全栈开发实战宝典》分享了全栈工程师的技能要求、核心竞争力、未来发展方向，以及对移动端的思考，内容涵盖了Web全栈开发的方方面面。《全栈开发实战宝典》既可以为互联网行业新人提供一幅精准的技术路线图，又可以作为相关从业程序员即学即用的工具书。
                    </p>
                </div>
            </div>
            <div class="bookcontainer">
                <a href="https://fanqienovel.com/page/7184738994582719549?enter_from=search" class="bookname"
                    target="_blank"><img src="../images/VUE面试题合集.jpg" alt="" class="cover"
                        style="margin-top: 10px;"></a>
                <div class="zhengwen">
                    <h3>vue面试题合集 </h3>
                    <span class="highlight-text">作者：爱吃甜辣鸡腿的张丹</span><span class="span one">已完结 · 计算机</span><span
                        class="span two">2673字 · 未满1000人在读</span>
                    <span class="span three">收藏数：96 点击数：1000+</span>
                    <p class="p four">vue面试题合集 在早晚可以听到知识。主要为了将要面试的小伙伴们，在闲暇时刻可以收到知识的熏陶。。。
                    </p>
                </div>
            </div>
            <div class="bookcontainer">
                <a href="https://fanqienovel.com/page/7111159286301985823?enter_from=search" class="bookname"
                    target="_blank"><img src="../images/高级前端程序员面试笔试宝典完整版.jpg" alt="" class="cover"></a>
                <div class="zhengwen">
                    <h3>高级前端程序员面试笔试宝典</h3>
                    <span class="highlight-text">作者：平文 楚秦</span><span class="span one">已完结 · 计算机</span><span
                        class="span two">18.6万字
                        · 未满1000人在读</span>
                    <span class="span three">收藏数：90 点击数：1000+</span>
                    <p class="p four">
                        《高级前端程序员面试笔试宝典》是一本针对前端高级程序员面试笔试的实用工具书，主要讲解了当下前端程序员面试笔试中所涉及的一些高级应用，如ES6、React、Vue.js、webpack、Babel等核心知识点，还引入了相关真题和解析来辅以说明，让读者能够更加从容地求职，获得更满意的岗位和薪资。
                        《高级前端程序员面试笔试宝典》涵盖了前端高级程序员面试笔试过程中的各类要点，在题目的选择上，去除了同质化严重和参考价值一般的面试题，加入了当前企业针对前端岗位的主流笔试面试真题。在讲解的深度上，本书深入解析重要知识点，每个步骤都环环相扣，并注意提炼归纳，同时，引入相关扩展阅读知识点，让读者在遇到相似问题的时候，也能游刃有余地解决。在内容的安排上，本书根据知识点进行分类，结构合理，条理清晰，便于读者短期内快速提升与查阅。
                        《高级前端程序员面试笔试宝典》适合前端开发人员、准备参加前端程序员面试的求职人员，想转行从事前端开发的人员和项目经理阅读，也可以作为计算机相关专业师生的学习用书和培训学校的教材。
                    </p>
                </div>
            </div>
            <div class="bookcontainer">
                <a href="https://fanqienovel.com/page/7110094244651469860?enter_from=search" class="bookname"
                    target="_blank"><img src="../images/css-4.jpg" alt="" class="cover"></a>
                <div class="zhengwen">
                    <h3>Div+CSS网页制作实战教程</h3>
                    <span class="highlight-text">作者：主编 周苏峡</span><span class="span one">已完结 · 计算机</span><span
                        class="span two">8.1万字
                        · 未满1000人在读</span>
                    <span class="span three">收藏数：89 点击数：1000+</span>
                    <p class="p four">网页设计与制作是一门综合性学科，涉及到美工设计、图像处理、动画制作、HTML、DIV+CSS布局排版、网页脚本设计等多方面的内容。
                        《Div+CSS网页制作实战教程》是作者在多年从事网页设计与制作课程教学及网站开发实践的基础上，采用工作任务驱动的教学方法，对网页静态模板制作流程中所涉及的主要知识点进行了梳理，涵盖的内容包括网站创建、页面配色、HTML标签、DIV+CSS布局、JavaScript基础等，其中对HTML5的新增标签和CSS3的新增属性进行了补充讲解，后本书提供了几个网页制作综合实训的例子，逐步引导学生完成整体网站界面的制作。
                        本书共分五个项目单元，分别是项目1（网站建设基础知识）、项目2（HTML网页文档的编辑）、项目3（网页外观制作技术）、项目4（网页的脚本设计）、项目5（网页制作综合实训）。
                        本书层次清楚，内容丰富，代码遵循Web标准，知识实用，特别适合作为高职高专学校的网页设计与制作及相关课程用书或培训教材，也可作为中职计算机应用、计算机网络技术等专业相关课程的教材及广大网页设计制作爱好者的学习参考书。
                    </p>
                </div>
            </div>
            <div class="bookcontainer">
                <a href="https://fanqienovel.com/page/7107515912248413215?enter_from=search" class="bookname"
                    target="_blank"><img src="../images/css-5.jpg" alt="" class="cover"></a>
                <div class="zhengwen">
                    <h3>Web开发技术——HTML、CSS、JavaScript
                    </h3>
                    <span class="highlight-text">作者：赵振</span><span class="span one">已完结 · 计算机</span><span
                        class="span two">10.0万字
                        · 未满1000人在读</span>
                    <span class="span three">收藏数：89 点击数：1000+</span>
                    <p class="p four">
                        《Web开发技术——HTML、CSS、JavaScript》主要讲解了Web前端开发的相关知识，主要包括HTML、CSS和JavaScript等内容。在讲解理论知识的基础上，《Web开发技术——HTML、CSS、JavaScript》更加重视应用实践，分3个层次来强化学生的实际动手能力，包括每个知识点后的示例demo，每章后的综合应用实例，以及每个部分后的实际案例。本书配套提供所有的源代码。
                        《Web开发技术——HTML、CSS、JavaScript》从实用的角度出发，在设计案例、章节内容等方面，力求能够满足读者需求，使读者可以迅速理解并借鉴应用相关知识点。
                        《Web开发技术——HTML、CSS、JavaScript》既可作为高等学校Web开发基础课程的教材，也可作为Web开发人员的技术参考书。
                    </p>
                </div>
            </div>
            <div class="pagination">
                <button id="prevPageBtn" disabled>上一页</button>
                <span id="pageInfo">第1页</span>
                <button id="nextPageBtn">下一页</button>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="../js/pagination.js"></script>
    <script src="../js/导航栏.js"></script>
    <script>
        $("#nav1 .biaoqian").on("click", function (e) {
            e.preventDefault(); // 阻止默认链接行为
            var $this = $(this);
            var position = $this.parent().position();
            var width = $this.parent().width();

            // 动画持续时间
            var DonghuaTime = 450;

            $("#nav1 .slide-one").css({ opacity: 1, top: position.top, width: width });

            // 动画结束后的跳转
            setTimeout(function () {
                window.location.href = $this.attr("href"); // 跳转到链接
            }, DonghuaTime);
        });

        // 初始设置slide-one的位置和宽度
        $(document).ready(function () {
            var currentWeight = $("#nav1 li:nth-of-type(6) a").parent("li").width();
            var current = $("#nav1 li:nth-of-type(6) a").parent("li").position();
            $("#nav1 .slide-one").css({ top: current.top, width: currentWeight, opacity: 1 }); // 初始设置就显示，不需要等待动画
        });
        </script>
</body>

</html>